<template>
  <div class="home">
    <!-- {{ name }} -- {{ age }}
    <hr>
    <button @click="handleClick">点击切换</button> -->

    <!-- <p>{{ name }}</p> -->


    <!-- <p>{{ nameObj.name }}</p> -->


    <!-- <p>{{ name }}</p>
    <p>{{ age }}</p> -->


    <!-- <div class="home">
      <p>第 {{year}} 年</p>
      <p>姓名: {{name}}</p>
      <p>年龄: {{age}}</p>
      <hr>
      <button @click="change">chenge data</button>
    </div> -->

    <!-- <p>{{obj.count}}</p>
    <p>{{obj.name}}</p>
    <button @click="change">change</button> -->


    <p>{{name}}</p>
    <p>{{age}}</p>
    <p>{{music}}</p>
    <p>{{sport}}</p>
    <button @click="change">change</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref ,reactive, readonly, toRefs, toRef} from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
  },
  // setup函数
  setup() {
    // const name = ref("刘旭照");
    // const age = ref(21);
    // let handleClick = () => {
    //   name.value = "张亚娟";
    //   age.value = 20;
    // };
    // return {
    //   name,
    //   age,
    //   handleClick,
    // };

    // ref,reactive
    // 原理: 通过 proxy 对数据进行封装,当数据变化时,触发模板等内容的更新
    // ref: 处理基础类型的数据  (也可以处理引用数据类型)
    // reactive: 处理引用数据类型

    // let name = ref("dell");
    // setTimeout(() => {
    //   // proxy  ,  "dell" 变成  proxy({value : "dell"})  这样的一个响应式引用
    //   name.value = "lee";
    // }, 2000);
    // return {
    //   name,
    // };

    // const nameObj = reactive({name:"dell"});
    // setTimeout(() => {
    //   // proxy  ,  {name : "dell"} 变成  proxy({name : "dell"})  这样的一个响应式引用
    //   nameObj.name = "lee";
    // }, 2000);
    // return {
    //   nameObj,
    // };



    // toRefs:  proxy({name:"dell",age:"20"})变成
    //          {name:proxy({name:"dell"})}
    //          {age:proxy({age:20})}

    // const nameObj = reactive({name:"dell",age:20});
    // setTimeout(() => {
    //   // proxy  ,  {name : "dell"} 变成  proxy({name : "dell"})  这样的一个响应式引用
    //   nameObj.name = "lee";
    //   nameObj.age = 100;
    // }, 2000);
    // const {name, age} = toRefs(nameObj);
    // return {
    //   name,
    //   age
    // };


    // toRef
    // const data = reactive({name:"dell"});
    // const name = toRef(data,"name");
    // setTimeout(()=>{
    //   name.value="lee"
    // },2000);
    // return{
    //   name,
    // }


    // ref 定义数据具有响应式的特性 (基本数据类型,不过也可以定义引用数据类型)
    // reactive 定义引用数据类型,让数据具有响应式的特性 , 但是不能定义基本数据类型
    // let year = ref(2000);
    // let user = reactive({name : "dell" , age : 100})
    // let change = () =>{
    //   year.value = 2021;
    //   user.name = user.name + "s";
    //   user.age = 200;
    // };
    // return {
    //   year,
    // 当我们在vue3使用解构赋值,就会让数据失去响应式对象的特性,如果要解决这个文图,我们这个使用toRefs
    //   ...toRefs(user),
    //   change,
    // }




    // // let str = reactive('a')  // reactive只能处理引用数据类型
    // const obj = reactive({count:1,name:"张三"});
    // let change = () =>{
    //   obj.count = obj.count + 1;
    //   obj.name = "李四"
    // }
    // return {
    //   obj,
    //   change,
    // }




    let name = ref("jack");
    let age = ref(20);
    const obj = reactive({music : "海阔天空" , sport : "跑步"});
    function change(){
      name.value = "rose";
      age.value = 22;
      obj.music = "友情岁月";
      obj.sport = "跳舞"
    }
    let {music,sport} = toRefs(obj)
    return{
      name,
      age,
      music,
      sport,
      change,
    }
  },
});



</script>
